@layout("/common/_container.html"){
<style>
	*{
		font-family:PingFangSC-Light, sans-serif !important;
	}
	.stat-container {
		display: table;
		margin-bottom: 1.5em;
		width: 100%;
	}
	.stat-holder{
		display: table-cell;
		width: 25%;
	}
	.stat {
		height: 110px;
		padding: 15px;
		margin-right: 1em;
		font-size: 12px;
		font-style: italic;
		text-align: center;
		color: #888;
		background: #FFF;
		border: 1px solid #CCC;
		border-radius: 5px;
		text-shadow: 1px 1px 2px rgba(255,255,255,.5);
	}

	.stat span {
		display: block;
		margin-bottom: .4em;
		font-size: 22px;
		font-weight: 600;
		font-style: normal;
		color: #4A515B;
	}

</style>


<div class="stat-container">
	<div class="stat-holder">
		<div class="stat">
			<span id="repaymentMoney">0</span>
			入账总金额
		</div> <!-- /stat -->
	</div> <!-- /stat-holder -->

	<div class="stat-holder">
		<div class="stat">
			<span id="orderMoney">0</span>
			出账总金额
		</div> <!-- /stat -->
	</div> <!-- /stat-holder -->

	<div class="stat-holder">
		<div class="stat">
			<span id="intentionCount">0</span>
			平台账户总额
		</div> <!-- /stat -->
	</div> <!-- /stat-holder -->

	<div class="stat-holder">
		<div class="stat">
			<span id="targetCount">0</span>
			平台盈亏
		</div> <!-- /stat -->
	</div> <!-- /stat-holder -->
</div>
<div class="row">
	<div class="col-md-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">本月销售漏斗</h3>
			</div>
			<div class="panel-body" id="loudoutu" style="height: 300px">
				Panel content
			</div>
		</div>
	</div>
	<div class="col-md-6">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">客户信息来源</h3>
			</div>
			<div class="panel-body" style="height: 300px" id="xinxiSource">
				Panel content
			</div>
		</div>
	</div>
</div>

<!--<div class="panel panel-default">-->
	<!--<div class="panel-heading">-->
		<!--<h3 class="panel-title">本月个人统计</h3>-->
	<!--</div>-->
	<!--<div class="panel-body" id="userStat" style="height: 300px">-->
		<!--Panel content-->
	<!--</div>-->
<!--</div>-->

<!--<div class="panel panel-default">-->
	<!--<div class="panel-heading">-->
		<!--<h3 class="panel-title">本月部门统计</h3>-->
	<!--</div>-->
	<!--<div class="panel-body" id="deptStat" style="height: 300px">-->
		<!--Panel content-->
	<!--</div>-->
<!--</div>-->


<script src="${ctxPath}/static/js/plugins/echarts/echarts-all.js"></script>
<script>
    var params = {"userId":parent.userId};
	//获取基本统计
	function statAllBase() {
        $.post("/stat/statAllBase", params,function(data,status){
            if("success" == status){
                //repaymentMoney:回款金额,orderMoney:签约金额,intentionCount:意向客户, targetCount:目标客户
				$("#repaymentMoney").html("￥"+data.repaymentMoney+"元");
                $("#orderMoney").html("￥"+data.orderMoney+"元");
                $("#intentionCount").html("￥"+ data.intentionCount+"元");
                $("#targetCount").html("￥"+ data.targetCount+"元");
			} else {
                alert("统计加载失败，请刷新页面！");
			}
        });
    }
    //销售漏斗
	function statFunnel() {
        $.post("/stat/statFunnel", params,function(data,status){
            if("success" == status){
                //targetCount:目标,intentionCount:意向,schemeCount:方案, contractCount:签约,contractingCount:合同执行中
                var targetCount = data.targetCount;
                var intentionCount = data.intentionCount;
                var schemeCount = data.schemeCount;
                var contractCount = data.contractCount;
                var contractingCount = data.contractingCount;

				// var targetCount = 100;
				// var intentionCount = 80;
				// var schemeCount = 60;
				// var contractCount = 40;
				// var contractingCount = 20;
				var legendData = new Array();
                legendData[0] = "目标"+targetCount+"个";
                legendData[1] = "意向"+intentionCount+"个";
                legendData[2] = "方案"+schemeCount+"个";
                legendData[3] = "签约"+contractCount+"个";
                legendData[4] = "合同"+contractingCount+"个";

                var seriesData = [];
                seriesData.push({"value": targetCount, "name": legendData[0]});
                seriesData.push({"value": intentionCount, "name": legendData[1]});
                seriesData.push({"value": schemeCount, "name": legendData[2]});
                seriesData.push({"value": contractCount, "name": legendData[3]});
                seriesData.push({"value": contractingCount, "name": legendData[4]});
                funnelChartsImg(legendData, seriesData);
			} else {
                alert("统计加载失败，请刷新页面！");
			}
        });
    }

    //销售漏斗
    function statCustomerSource() {
        $.post("/stat/statCustomerSource",params, function(data,status){
            if("success" == status){
                //source0:微信申请,source1:客户介绍,source2:电话,source3:评访,source99:其它
                var source0 = data.source0;
                var source1 = data.source1;
                var source2 = data.source2;
                var source3 = data.source3;
                var source99 = data.source99;

                var legendData = new Array();
                legendData[0] = "微信申请";
                legendData[1] = "客户介绍";
                legendData[2] = "电话";
                legendData[3] = "评访";
                legendData[4] = "其它";

                var seriesData = [];
                seriesData.push({"value": source0, "name": legendData[0]});
                seriesData.push({"value": source1, "name": legendData[1]});
                seriesData.push({"value": source2, "name": legendData[2]});
                seriesData.push({"value": source3, "name": legendData[3]});
                seriesData.push({"value": source99, "name": legendData[4]});
                customerSourceChartsImg(legendData, seriesData);
            } else {
                alert("统计加载失败，请刷新页面！");
            }
        });
    }

    //个人排名
    function statUserCustomer() {
        $.post("/stat/statUserCustomer",function(data,status){
            if("success" == status){
                var legendData = new Array();
                var seriesData = new Array();
                $.each(data,function(index,value) {
                    legendData[index] = value.name;
                    seriesData[index] = value.num;
                });
                console.log(legendData);
                console.log(seriesData);
                userCustomerChartsImg(legendData, seriesData);
            } else {
                alert("统计加载失败，请刷新页面！");
            }
        });
    }
    //部门排名
    function statDeptCustomer() {
        $.post("/stat/statDeptCustomer",function(data,status){
            if("success" == status){
                var legendData = new Array();
                var seriesData = new Array();
                $.each(data,function(index,value) {
                    legendData[index] = value.fullname;
                    seriesData[index] = value.num;
                });
                deptCustomerChartsImg(legendData, seriesData);
            } else {
                alert("统计加载失败，请刷新页面！");
            }
        });
    }
    $(function () {
        statAllBase();
        statFunnel();
        statCustomerSource();
//        statUserCustomer();
//        statDeptCustomer();
    });

    /**
	 * 销售漏斗
     */
	function funnelChartsImg(legendData, seriesData) {
        // 销售漏斗
		console.log(legendData);
		console.log(seriesData);
        var myChart = echarts.init(document.getElementById('loudoutu'));
        var option = {
            // title: {
            //    text: '漏斗图'
            // },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: legendData,
                left: '0px'
            },
            calculable: true,
            series: [
                {
                    name:'漏斗图',
                    type:'funnel',
                    left: '24%',
                    top: 60,
                    //x2: 80,
                    bottom: 60,
                    width: '60%',
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    },
                    data: seriesData
                }
            ]
        };
        // 绘制图表
        myChart.setOption(option);
    }

    function customerSourceChartsImg(legendData, seriesData) {
        // 信息来源统计
        myChart = echarts.init(document.getElementById('xinxiSource'));
        option = {
            // title : {
            //     text: '饼图',
            //     // x:'center'
            // },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                // left: '0px',
                data: legendData
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

	function userCustomerChartsImg(legendData, seriesData){
        // 个人统计
        myChart = echarts.init(document.getElementById('userStat'));
        option = {
            // title : {
            //     text: '柱状图',
            // },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['销售量']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : legendData
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'销售量',
                    type:'bar',
                    data: seriesData,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }

            ]
        };
        myChart.setOption(option);
	}


    function deptCustomerChartsImg(legendData, seriesData){
        // 个人统计
        myChart = echarts.init(document.getElementById('deptStat'));
        option = {
            // title : {
            //     text: '柱状图'
            // },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['销售量']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : legendData
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'销售量',
                    type:'bar',
                    data: seriesData,
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                }

            ]
        };
        myChart.setOption(option);
	}

</script>
@}

